@use '@/assets/styles/variables.scss';
@use '@/assets/styles/mixin.scss';
/***** 表单 *****/
.lc-autocomplete {
  @include mixin.createCssFromStyles('&.el-autocomplete');
}

.lc-cascader {
  @include mixin.createCssFromStyles('&.el-cascader');
  & {
    width: var(--form-input-width, 240px);
  }
}
.lc-area-selector{
  width: var(--form-input-width, 240px);
}
$checkbox-style-maps: (
  color: color,
  background-color: color,
  border-color: color
);
.lc-checkbox {
  @include mixin.createCssFromStyles('& .el-checkbox__input.is-checked+.el-checkbox__label');
  @include mixin.createCssByAttributeMaps(
    '& .el-checkbox__input.is-checked .el-checkbox__inner',
    $checkbox-style-maps
  );
}

$checkbox-group-style-maps: (
  color: color,
  background-color: color,
  border-color: color
);
.lc-checkbox-group {
  @include mixin.createCssFromStyles('& .el-checkbox__input.is-checked+.el-checkbox__label');
  @include mixin.createCssByAttributeMaps(
    '& .el-checkbox__input.is-checked .el-checkbox__inner',
    $checkbox-group-style-maps
  );
}
.lc-checkbox-group--column {
  display: flex;
  flex-direction: column;
}

.lc-download-button {
  @include mixin.createCssFromStyles('&.el-button');
}

/** Excel导入 */
.lc-excel-import {
  @include mixin.createCssFromStyles('.el-button');
}
.lc-excel-import__dialog {
  .lc-excel-import__dialog-header {
    display: flex;
    align-items: center;
    .header-piece {
      width: 4px;
      height: 12px;
      background-color: var(--primary-color);
    }
    .header-label {
      font-size: 16px;
      margin-left: 5px;
    }
    .header-btn {
      margin-left: 20px;
    }
  }
  .lc-excel-import__dialog-table {
    margin-top: 10px;
    .import-success {
      color: #67c23a;
    }
    .import-error {
      color: #f56c6c;
    }
  }
}

/** Excel导出 */
.lc-excel-export {
  @include mixin.createCssFromStyles('&.el-button');
}

/** 文件上传 */
.lc-file {
  text-align: left;
  @include mixin.createCssFromStyles('.lc-upload .el-button');
  .el-upload-dragger {
    width: 360px;
    height: 180px;
    .el-icon {
      font-size: 67px;
      color: #c0c4cc;
      line-height: 50px;
    }
  }
  .lc-file-list {
    &__item {
      display: flex;
      align-items: center;
      &-icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }
      &-label {
        color: #222222;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &-operates {
        margin-left: 20px;
        > * {
          margin-left: 10px;
        }
      }
    }
  }
}

/* 输入框 */
.lc-input {
  @include mixin.createCssFromStyles('&,& .el-input__wrapper');
  @include mixin.createCssByAttributeMaps('& .el-input__inner', variables.$common-style-maps);
  &[size='compact'] {
    .el-input__inner {
      padding: 0 5px;
    }
    .el-input-group__append {
      padding: 0;
    }
  }
}

$inputAmount: lc-input-amount;
.#{$inputAmount} {
  @include mixin.createCssFromStyles('.el-input__inner');
  @include mixin.createCssFromStyles('&.el-input');
  @include mixin.createCssFromStyles('.el-input-group__prepend');
  @include mixin.createCssFromStyles('.el-input-group__append');
  > .el-input__inner {
    text-align: right;
  }
  .#{$inputAmount}__unit-select {
    .el-input__inner {
      padding: 0 5px;
    }
  }
}

.lc-label {
  @include mixin.createCssFromStyles('&.lc-label');
  & {
    display: inline-block;
    line-height: var(--input-height, 32px);
  }
  &--overflow {
    @include mixin.overHide(1);
  }
}

.lc-listInput {
  &__item {
    display: flex;
    align-items: center;
    &-icon {
      margin-right: 10px;
    }
    &-label {
      color: var(--text-color-1);
      cursor: pointer;
    }
    &-operates {
      margin-left: 20px;
    }
  }
}

/** 数字输入框 */
.lc-input-number {
  @include mixin.createCssFromStyles('& .el-input .el-input__wrapper');
  @include mixin.createCssByAttributes('& .el-input__inner', 'color');
  .el-input-number__decrease,
  .el-input-number__increase {
    top: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &[style*='--border-width'] .el-input-number__decrease,
  &[style*='--border-width'] .el-input-number__increase {
    top: var(--border-width);
    bottom: var(--border-width);
  }
  &[style*='--border-width'] .el-input-number__increase {
    right: var(--border-width);
  }
  &[style*='--border-width'] .el-input-number__decrease {
    left: var(--border-width);
  }
}

.lc-password {
  @include mixin.createCssByAttributes('&.el-input', width, height, line-height);
  &.el-input--suffix {
    @include mixin.createCssFromStyles('& .el-input__inner');
  }
}

/** 单选框 */
.lc-radio-group {
  @include mixin.createCssFromStyles('& .el-radio.is-checked .el-radio__label');
  // @include createCssByAttributeMaps('& .el-radio__input.is-checked .el-radio__inner', variables.$common-style-maps);
  &[style*='--inner'] {
    .el-radio-button {
      &__inner {
        padding: var(--innerPadding);
      }
    }
  }
  .el-radio__input.is-checked span.el-radio__inner:after {
    background-color: #fff;
    width: 4px;
    height: 4px;
  }
  .el-radio-group {
    vertical-align: -webkit-baseline-middle;
  }
}
.lc-radio-width {
  .el-radio {
    width: var(--width);
    margin-right: 0;
  }
}
$radio-group-style-maps: (
  color: color,
  background-color: color,
  border-color: color
);
.lc-radio-group {
  @include mixin.createCssFromStyles('& .el-radio__input.is-checked+.el-radio__label');
  @include mixin.createCssByAttributeMaps(
    '& .el-radio__input.is-checked .el-radio__inner',
    $radio-group-style-maps
  );
  & {
    color: var(--text-color-3);
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: var(--active-block-bg-color);
    background-color: var(--block-bg-color-1);
    border-color: var(--active-block-bg-color);
  }
  .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
    background-color: var(--text-color-4);
    color: var(--text-color-3);
    border-color: var(--border-color);
  }
  .el-radio-button__orig-radio:disabled + .el-radio-button__inner {
    background-color: var(--block-bg-color-2);
    color: var(--text-color-3);
    border-color: var(--border-color);
  }
}

.lc-radioCard {
  display: flex;
  align-items: center;

  &__option {
    width: 150px;
    height: 100px;
    border: 1px solid #b3d8ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.5s ease;
    // background-color: #fff;

    // hover状态 展示用
    &.hovered {
      // background-color: #ecf5ff;
      border-color: #409eff;
    }
    // 选中状态 展示用
    &.selected {
      // background-color: #ecf5ff;
      border-color: #409eff;
    }
    &:not(:last-child) {
      margin-right: 20px;
    }

    &-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    &-img {
      width: 100%;
      flex: 4;
      background-color: lightgreen;
    }

    &-text {
      width: 100%;
      flex: 1;
      background-color: lightcoral;
    }
  }

  &__selectedIcon {
    display: block;
    height: 0px;
    width: 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    border: 18px solid;
    border-color: transparent #409eff #409eff transparent;
  }
}

.lc-rate {
  height: var(--input-height);
  display: flex;
  align-items: center;
  @include mixin.createCssFromStyles('&.el-rate');
}

/** 选择框 */
.lc-select{
  @include mixin.createCssFromStyles('& .el-select__wrapper');
  @include mixin.createCssByAttributes('& .el-select__placeholder:not(.is-transparent)', color);
  &[style*='--color'] .el-select__selected-item .el-tag.el-tag--info {
    color: var(--color);
    border-color: color-mix(in srgb, var(--color) 50%, #fff);
    background-color: color-mix(in srgb, var(--color) 20%, #fff);
    .el-tag__close {
      color: var(--color);
      background-color: color-mix(in srgb, var(--color) 50%, #fff);
    }
  }
  @include mixin.createCssByAttributeMaps(
    '&.el-select-dropdown__item.selected',
    (
      color: option-color
    )
  );
  
}
.lc-select-popper {
  .el-select-dropdown__item {
    color: var(--text-color-1);
    &.is-selected {
      font-weight: normal;
      color: var(--text-color-1);
      background-color: var(--block-bg-color-1);
    }
    &.is-hovering {
      background-color: var(--block-bg-color-1);
    }
  }
}

.lc-select-group {
  .el-select {
    width: 100%;
  }
  .el-select-group__wrap:not(:last-of-type) {
    padding: 0;
  }
  .el-select-group__wrap:not(:last-of-type)::after {
    height: 0;
  }
  @include mixin.createCssFromStyles('& .el-input__inner');
  @include mixin.createCssByAttributeMaps(
    '&.selected',
    (
      color: option-color
    )
  );
}

/** 下拉树选择器 */
.lc-selectTree {
  @include mixin.createCssFromStyles('& .el-input__inner');
}

.lc-selection-table {
  .hide-select-all {
    .cell {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}

.lc-slider {
  @include mixin.createCssFromStyles('&');
  & {
    display: flex;
    align-items: center;
  }
  .el-slider {
    flex: 1;
    margin: 0 10px;
  }
}

.lc-switch {
  height: var(--input-height);
  display: flex;
  align-items: center;
  @include mixin.createCssFromStyles('&.el-switch');
}

.lc-tag {
  @include mixin.createCssFromStyles('&');
  .el-input {
    margin: 5px 0;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
}

.lc-status {
  @include mixin.createCssFromStyles('&');
  & {
    padding: 0 10px;
    line-height: var(--input-height, 32px);
  }
  &--point {
    &::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 4px;
      display: inline-block;
      vertical-align: inherit;
      background-color: var(--color, var(--text-color-1));
    }
  }
}

.lc-textarea {
  @include mixin.createCssByAttributes('&.el-textarea', width, height, line-height);
  @include mixin.createCssFromStyles('& .el-textarea__inner');
  &[style*='--height'] textarea {
    // 限制resize不超过容器
    max-height: 100%;
  }
  &[style*='--width'] textarea {
    // 限制resize不超过容器
    max-width: 100%;
  }
}

.lc-date-picker {
  display: inline-block;
  @include mixin.createCssFromStyles('& .el-date-editor');
  @include mixin.createCssFromStyles('& .el-input__wrapper, &.el-input__wrapper');
  @include mixin.createCssByAttributeMaps('& .el-input__inner', variables.$common-style-maps);
}

.lc-date-time-picker {
  @include mixin.createCssFromStyles('&');
  @include mixin.createCssByAttributesImportant('&', width, height);
  @include mixin.createCssFromStyles('& .el-input__wrapper');
  @include mixin.createCssByAttributes('& .el-input__inner', 'color');
}

.lc-time-picker {
  display: inline-block;
  @include mixin.createCssFromStyles('& .el-date-editor');
  @include mixin.createCssFromStyles('& .el-input__wrapper');
  @include mixin.createCssByAttributes('& .el-input__inner', 'color');
}
.lc-time-picker-popper {
  // width: 240px;
  .el-popper__arrow {
    display: none;
  }
  .el-time-spinner__item {
    font-size: 14px;

    &.is-active:not(.is-disabled) {
      background-color: var(--block-bg-color-2);
      border: none;
    }
  }
  .el-scrollbar__view {
    border-left: 1px solid var(--text-color-4);
  }
  .el-time-spinner__wrapper.el-scrollbar {
    .el-scrollbar__wrap {
      padding-bottom: 0px;
    }
    .el-scrollbar__bar {
      opacity: 0;
    }
  }
  .el-time-spinner__list {
    &::before {
      height: 0px;
      border: none;
    }
    &::after {
      height: 160px;
    }
  }
  .el-time-panel__content::before,
  .el-time-panel__content::after {
    border: none;
  }
  .el-time-panel__footer {
    display: flex;
    justify-content: space-between;
    .el-time-panel__btn {
      &.confirm {
        font-weight: normal;
        background-color: var(--active-block-bg-color);
        color: var(--text-color-inverse);
        padding: 0 20px;
        border-radius: 2px;
      }
      &.current {
        color: var(--active-block-bg-color);
      }
      &.cancel {
        display: none;
      }
    }
  }
}

.lc-transfer {
  @include mixin.createCssFromStyles(' .el-transfer');
  > .el-transfer {
    text-align: left;
    display: inline-block;
  }
  .el-input {
    margin: 5px 0;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
}

.lc-button {
  @include mixin.createCssFromStyles('&.el-button');
}

// 上传
.lc-upload {
  .el-upload-dragger {
    border: 1px solid var(--border-color);
    border-radius: 2px;
    width: 260px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .lc-upload__add {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    margin-bottom: 5px;
    .is-disabled {
      color: var(--text-color-3);
    }
    span {
      margin-left: 5px;
      color: var(--text-color-1);
    }
    .lc-upload__add-limit {
      color: var(--text-color-3);
    }
    i {
      color: var(--active-block-bg-color);
    }
  }
  .lc-upload__desc {
    color: var(--text-color-3);
    font-size: 14px;
    height: 25px;
    span {
      margin-left: 5px;
    }
  }
}
.lc-link {
  @include mixin.createCssFromStyles('&.el-link');
}
